<template>
    <sky-card>
        <view class="status-box">
            <view class="item left-box">
                <view class="title">提交审核</view>
                <view class="circle-box">
                    <view class="circle">
                    </view>
                    <view class="right-line"></view>
                </view>
            </view>
            <view class="item center-box">
                <view class="title">商家审核</view>
                <view class="circle-box">
                    <view v-if="refundInfo.status==='1'" class="circle-plain">
                    </view>
                    <view v-else-if="refundInfo.status==='2'" class="circle-red">
                    </view>
                    <view v-else class="circle">
                    </view>
                    <view class="center-line"></view>
                </view>
            </view>
            <view class="item right-box">
                <view class="title">退款成功</view>
                <view class="circle-box">
                    <view v-if="['1','2'].includes(refundInfo.status)" class="circle-plain">
                    </view>
                    <view v-else class="circle">
                    </view>
                    <view class="left-line"></view>
                </view>
            </view>
        </view>
        <view class="status_text-box">
            <view class="status_text">
                {{refundInfo.status_text}}
            </view>
            <view v-if="refundInfo.status==='1'" class="content">请尽快提交快递单号商家审核已通过请耐心等待退款。</view>
            <view v-else-if="refundInfo.status==='2'" class="content">商家拒绝了您的申请</view>
            <view v-else class="content">退款成功，请耐心等待。</view>
        </view>
    </sky-card>
</template>
<script setup>
const props = defineProps({
    refundInfo: {
        type: Object,
        default: () => {
            return {}
        }
    }
})
</script>
<style scoped lang="scss">
.status-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    
    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100rpx;
        
        .title {
            margin-bottom: 32rpx;
        }
        
        .circle-box {
            position: relative;
            width: 100%;
            .circle,.circle-red,.circle-plain {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 38rpx;
                height: 38rpx;
                border-radius: 50%;
                background-color: #b07f63;
            }
            .circle-red{
                z-index: 10;
                background-color: red;
            }
            .circle-plain{
                z-index: 10;
                border: 2rpx solid #b07f63;
                background-color: #fff;
            }
            .right-line,.left-line,.center-line {
                position: absolute;
                top: 50%;
                height: 4rpx;
                z-index: 9;
                background-color: #b07f63;
            }
            .right-line {
                left: 50%;
                width: 50%;
            }
            .left-line {
                right: 50%;
                width: 50%;
            }
            .center-line {
                left: 0;
                width: 100%;
            }
        }
    }
}
.status_text-box{
    background-color: #f5f5f5;
    margin: 24rpx 0 0;
    padding: 18rpx 24rpx;
    box-sizing: border-box;
    color: #606266;
    
    .status_text{
        margin-bottom: 16rpx;
    }
}
</style>
